<template>
    <div class="wrapper">
        <mt-header title="锁定" class="no-bg">
            <mt-button icon="back" slot="left" @click="$router.back(-1)"></mt-button>
        </mt-header>
        <div class="content">
            <div class="text">已锁定(DLB)</div>
            <div class="money">{{ num }}</div>
            <div class="unlock-num bottom-border">
                <!-- <mt-field placeholder="请输入解锁数量" type="number" disableClear v-model="inputValueNum"></mt-field> -->
                <input class="unlock-num-input" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" v-model="inputValueNum">
            </div>
            <div class="rang-unlock">
                <input type="range" v-model="inputValueNum" :max="numInt" min=0 step=1 :style="{'background-size':num<1?'0% 0%':inputValueNum*100/numInt+'% 100%'}"/>
            </div>
            <div class="default-btn">
                <mt-button type="primary" size="large" :disabled="(inputValueNum<=numInt&&inputValueNum>=1&&(num>=1))?false:true" @click.native="postUnlock">解锁</mt-button>
            </div>
            <div class="tips">
                <div v-show="inputValueNum>num">输入数量超过已锁定的数量</div>
                <div v-show="inputValueNum<1">输入数量不能小于1</div>
            </div>
        </div>
    </div>
</template> 

<script>
import { mapGetters } from 'vuex'
import { PostUnlock } from '@/api/api'
import { Toast } from 'mint-ui';
import { validateInteger } from '@/utils/validate'
export default {
    data: function () {
        return {
            num:0,
            numInt:null,
            inputValueNum:null,
            isShow:false
        }
    },
    mounted(){
        if(this.walletInfo){
            this.num = Number(this.walletInfo.lockDlb);
            this.numInt = Math.floor(this.num);
            this.inputValueNum = this.numInt
            console.log(this.inputValueNum);
        }
    },
    computed: {
        ...mapGetters([
            'walletInfo'
        ])
    },
    methods: {
        postUnlock(){
            PostUnlock({
                unlockCount:this.inputValueNum
            }).then(res => {
                if( res.code == 200 ){
                    Toast({
                        message: "解锁成功"
                    });
                    this.$router.push('/account/wallet');
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
   .content{
        margin-top:20px;
        padding:0 15px;
        .text{
            color:#bfbfbf;
            font-size: 13px;
        }
        .money{
            margin-top: 30px;
            font-weight: bold;
            text-align: center;
            color:#333333;
            font-size: 24px;
        }
        .unlock-num{
            padding: 0 15px;
            .unlock-num-input{
                padding-bottom: 12px;
                margin-top: 29px;
                height:50px;
                font-size: 14px;
                border-bottom: 1px solid #e3e3e3;
            }
        }
        .rang-unlock{
            margin-top:20px;
        }
        .tips{
            padding:0 15px;
            margin-top:10px;
            color:#ec3333;
            font-size:12px;
        }
    }
}

/*横条样式*/
input[type=range] {
    -webkit-appearance: none;/*清除系统默认样式*/
    width: 100%;
    background: -webkit-linear-gradient(#0055A4, #0055A4) no-repeat, #ddd;/*设置左边颜色为#61bd12，右边颜色为#ddd*/
    background-size: 75% 100%;/*设置左右宽度比例*/
    height: 3px;/*横条的高度*/
}
/*拖动块的样式*/
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;/*清除系统默认样式*/
    height: 26px;/*拖动块高度*/
    width: 26px;/*拖动块宽度*/
    background: #fff;/*拖动块背景*/
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 1px #ddd; /*设置边框*/
}
</style>
